<template>
  <div class="app-container">
    <div class="mb-22">
      <el-button v-hasPermi="['config:channelPostBack:add']" type="success" @click="handleAdd">添加回传配置</el-button>
    </div>

    <YxhyTableData :columns="columns" :data="tableList" :loading="loading">
      <!-- 配置内容插槽 -->
      <template #config_content>
        <el-table-column label="配置内容" align="center" width="auto">
          <template slot-scope="scope">
            <p class="font-color-td">{{ ADV_REPORT_TYPE[scope.row.adv_report_type] }}</p>
            <p class="font-color-td">首充最低回传{{ scope.row.first_pay_min_price }}元</p>
          </template>
        </el-table-column>
      </template>
      <!-- 插槽内容 -->
      <template #action>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <div class="table-action-panel">
              <template v-if="scope.row.flag === 1">
                <el-button v-hasPermi="['config:channelPostBack:flag']" type="danger" size="mini" @click="handleUpdateFlag(scope.row, 0)">关闭</el-button>
              </template>
              <template v-else-if="scope.row.flag === 0">
                <el-button v-hasPermi="['config:channelPostBack:flag']" type="success" size="mini" @click="handleUpdateFlag(scope.row, 1)">开启</el-button>
              </template>
              <el-button v-hasPermi="['config:channelPostBack:edit']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<!--              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>-->
            </div>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

  </div>
</template>

<script>
import {
  queryPageChannelList,
  editChannelConfigFlag,
  REPORT_TYPE,
  ADV_REPORT_TYPE,
  FLAG
} from '@/api/config/channelPostBack.js'
import { columnsStatic } from './Ds.js'

export default {
  name: 'ChannelPostBackList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      loading: false,
      // 表格列
      columns: columnsStatic,
      ADV_REPORT_TYPE
    }
  },
  computed: {
    isEdit() {
      return ![undefined, ''].includes(this.form.id)
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await queryPageChannelList({
        ...this.queryPage
      })
      res.data.map(e => {
        const { report_type, flag } = e
        e.report_type_text = REPORT_TYPE[report_type]
        e.flag_text = FLAG[flag]
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.init()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({
        path: '/config/channelPostBack/add'
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const { id } = row
      this.$router.push({
        path: '/config/channelPostBack/add',
        query: {
          id
        }
      })
    },
    /** 开启/关闭按钮操作 */
    async handleUpdateFlag(row, flag) {
      await editChannelConfigFlag({
        id: row.id,
        flag
      })
      row.flag = flag
      this.$modal.msgSuccess('操作成功')
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const {id} = row
      // const dictIds = row.dictId || this.ids
      // this.$modal
      //   .confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？')
      //   .then(function() {
      //     return delType(dictIds)
      //   })
      //   .then(() => {
      //     this.getList()
      //     this.$modal.msgSuccess('删除成功')
      //   })
      //   .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.item-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
  .item-panel {
    width: 32%;
    background-color: #f8f8f8;
    padding: 10px;
    margin-bottom: 20px;
  }
}
.item-box:after{
  content: '';
  width: 30%;
}
</style>
